<template>
  <el-input
    :value="value"
    :disabled="disabled"
    :placeholder="'请输入'+label"
    :maxlength="maxlength || '20'"
    show-word-limit
    class="limit"
    clearable
    @input="inputValue"
  >
    <template slot="append">
      <div style="cursor: pointer;" @click="disabled?'':handleAutoFill()">自动填充</div>
    </template>
  </el-input>
</template>
<script>
import { uuId } from '@/framework/utils/uuid'

export default {
  name: 'autoFillInput',
  props: {
    // 自动填充的编码长度
    maxlength: {
      type: String,
      default: '20'
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: ''
    },
    autofillSize: {
      type: Number,
      default: 8
    },
    disabled: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'create'
    }
  },
  watch: {
    value: {
      handler(newVal, oldVa) {
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.status == 'create' ? this.handleAutoFill() : ''
  },
  methods: {
    inputValue(val) {
      this.$emit('input', val.replace(/\s/g, ''))
    },
    handleAutoFill() {
      this.$emit('input', this.prefix ? `${this.prefix}_${uuId(this.autofillSize)}` : uuId(this.autofillSize))
    }
  }
}
</script>
